<template>
  <div class="model-provider-selector">
    <!-- 选择框 -->
    <div class="selector-dropdown" @click="toggleDropdown">
      <div v-if="selectedProvider" class="selected-provider">
        <div class="provider-icon">
          <img :src="selectedProvider.icon" :alt="selectedProvider.name" />
        </div>
        <div class="provider-name">{{ selectedProvider.name }}</div>
      </div>
      <div v-else class="placeholder">请选择模型提供商</div>
      <div class="dropdown-arrow" :class="{ 'arrow-up': isDropdownOpen }">
        <svg viewBox="0 0 1024 1024" width="12" height="12">
          <path d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 320 320-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-341.333333 341.333333c-6.4 6.4-14.933333 8.533333-23.466667 8.533334z" fill="currentColor"></path>
        </svg>
      </div>
    </div>

    <!-- 下拉选项列表 -->
    <div v-if="isDropdownOpen" class="dropdown-panel">
      <div class="search-box">
        <input
          type="text"
          v-model="searchText"
          placeholder="搜索模型提供商..."
          @click.stop
        />
      </div>
      <div class="provider-list">
        <div
          v-for="provider in filteredProviders"
          :key="provider.id"
          class="provider-item"
          :class="{ active: modelValue === provider.id }"
          @click.stop="selectProvider(provider)"
        >
          <div class="provider-icon">
            <img :src="provider.icon" :alt="provider.name" />
          </div>
          <div class="provider-name">{{ provider.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

// 引入所有模型图标
import openaiIcon from '../assets/icons/model/openai.png';
import anthropicIcon from '../assets/icons/model/anthropic.png';
import claudeIcon from '../assets/icons/model/claude.png';
import gptIcon from '../assets/icons/model/openai.png';
import mistralIcon from '../assets/icons/model/mistral.png';
import geminiIcon from '../assets/icons/model/gemini.png';
import metaIcon from '../assets/icons/model/meta.png';
import chatglmIcon from '../assets/icons/model/chatglm.png';
import gemmaIcon from '../assets/icons/model/gemma.png';
import qwenIcon from '../assets/icons/model/qwen.png';
import doubaoIcon from '../assets/icons/model/doubao.png';
import baiducloudIcon from '../assets/icons/model/baiducloud.png';
import deepseekIcon from '../assets/icons/model/deepseek.png';
import hunyuanIcon from '../assets/icons/model/hunyuan.png';
import modelscopeIcon from '../assets/icons/model/modelscope.png';
import sparkIcon from '../assets/icons/model/spark.png';
import tiangongIcon from '../assets/icons/model/tiangong.png';
import volcengineIcon from '../assets/icons/model/volcengine.png';
import baichuanIcon from '../assets/icons/model/baichuan.png';
import siliconcloudIcon from '../assets/icons/model/siliconcloud.png';
import moonshotIcon from '../assets/icons/model/moonshot.png';

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'select']);

// 提供商列表
const providers = ref([
  { id: 'openai', name: 'OpenAI', icon: openaiIcon },
  { id: 'anthropic', name: 'Anthropic', icon: anthropicIcon },
  { id: 'claude', name: 'Claude', icon: claudeIcon },
  { id: 'mistral', name: 'Mistral', icon: mistralIcon },
  { id: 'gemini', name: 'Gemini', icon: geminiIcon },
  { id: 'meta', name: 'Meta', icon: metaIcon },
  { id: 'chatglm', name: 'ChatGLM', icon: chatglmIcon },
  { id: 'gemma', name: 'Gemma', icon: gemmaIcon },
  { id: 'qwen', name: 'Qwen', icon: qwenIcon },
  { id: 'doubao', name: '豆包', icon: doubaoIcon },
  { id: 'baiducloud', name: '百度智能云', icon: baiducloudIcon },
  { id: 'deepseek', name: 'DeepSeek', icon: deepseekIcon },
  { id: 'hunyuan', name: '混元', icon: hunyuanIcon },
  { id: 'modelscope', name: 'ModelScope', icon: modelscopeIcon },
  { id: 'spark', name: '讯飞星火', icon: sparkIcon },
  { id: 'tiangong', name: '天工', icon: tiangongIcon },
  { id: 'volcengine', name: '火山引擎', icon: volcengineIcon },
  { id: 'baichuan', name: '百川', icon: baichuanIcon },
  { id: 'siliconcloud', name: 'Silicon Cloud', icon: siliconcloudIcon },
  { id: 'moonshot', name: 'Moonshot', icon: moonshotIcon }
]);

// 状态变量
const isDropdownOpen = ref(false);
const searchText = ref('');

// 点击外部关闭下拉框
const handleClickOutside = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (!target.closest('.model-provider-selector')) {
    isDropdownOpen.value = false;
  }
};

// 过滤提供商列表
const filteredProviders = computed(() => {
  if (!searchText.value) return providers.value;
  const search = searchText.value.toLowerCase();
  return providers.value.filter(provider => 
    provider.name.toLowerCase().includes(search) || 
    provider.id.toLowerCase().includes(search)
  );
});

// 切换下拉框状态
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
  if (isDropdownOpen.value) {
    searchText.value = '';
  }
};

// 选择提供商
const selectProvider = (provider: any) => {
  emit('update:modelValue', provider.id);
  emit('select', provider);
  isDropdownOpen.value = false;
};

// 获取当前选中的提供商
const selectedProvider = computed(() => {
  return providers.value.find(p => p.id === props.modelValue);
});

// 组件生命周期钩子
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.model-provider-selector {
  width: 100%;
  position: relative;
}

/* 选择框样式 */
.selector-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px 12px;
  min-height: 42px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
}

.selector-dropdown:hover {
  border-color: #40a9ff;
}

.selected-provider {
  display: flex;
  align-items: center;
  flex: 1;
}

.placeholder {
  color: #bfbfbf;
  font-size: 14px;
}

.dropdown-arrow {
  color: #bfbfbf;
  transition: transform 0.3s;
  margin-left: 8px;
}

.arrow-up {
  transform: rotate(180deg);
}

/* 下拉面板样式 */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-box {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.search-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  outline: none;
  transition: all 0.3s;
}

.search-box input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.search-box input::placeholder {
  color: #bfbfbf;
}

/* 提供商列表样式 */
.provider-list {
  overflow-y: auto;
  max-height: 280px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.provider-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.provider-item:hover {
  background-color: #f5f5f5;
}

.provider-item.active {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.provider-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.provider-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.provider-name {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 适配选中状态和下拉状态样式 */
.selector-dropdown.focus,
.selector-dropdown:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
</style> 